<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      svg {
        border: 1px solid red;
      }

      line,
      polyline,
      rect {
        stroke-linecap: round;
        stroke-linejoin: round;
      }
    </style>
  </head>

  <body>
    <svg width="300"
         height="300"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         preserveAspectRatio="xMinYMin meet"
         viewBox="0 0 300 300">
      <title>Grouped Drawing</title>
      <desc>Stick-figure drawings of a house and people</desc>
      <defs>
        <g id="house"
           style="stroke: black;">
          <desc>House with door</desc>
          <rect x="0"
                y="41"
                width="60"
                height="60" />
          <polyline points="0 41, 30 0, 60 41" />
          <polyline points="30 101, 30 71, 44 71, 44 101" />
        </g>
        <g id="man"
           style="fill: none; stroke: black;">
          <desc>Male stick figure</desc>
          <circle cx="10"
                  cy="10"
                  r="10" />
          <line x1="10"
                y1="20"
                x2="10"
                y2="44" />
          <polyline points="1 58, 10 44, 19 58" />
          <polyline points="1 24, 10 30, 19 24" />
        </g>
        <g id="woman"
           style="fill: none; stroke: black;">
          <desc>Female stick figure</desc>
          <circle cx="10"
                  cy="10"
                  r="10" />
          <polyline points="10 20, 10 34, 0 44, 20 44, 10 34" />
          <line x1="4"
                y1="58"
                x2="8"
                y2="44" />
          <line x1="12"
                y1="44"
                x2="16"
                y2="58" />
          <polyline points="1 24, 10 30, 19 24" />
        </g>
        <g id="couple">
          <desc>Male and female stick figures</desc>
          <use xlink:href="#man"
               x="0"
               y="0" />
          <use xlink:href="#woman"
               x="25"
               y="0" />
        </g>
      </defs>

      <!-- 利用组合定义 -->
      <use xlink:href="#house"
           x="0"
           y="0"
           style="fill: #cfc;" />
      <use xlink:href="#couple"
           x="70"
           y="40" />
      <use xlink:href="#house"
           x="120"
           y="0"
           style="fill: #99f;" />
      <use xlink:href="#couple"
           x="190"
           y="40" />
      <use xlink:href="#woman"
           x="0"
           y="145" />
      <use xlink:href="demo.svg#man"
           x="25"
           y="145" />
      <use xlink:href="#house"
           x="65"
           y="105"
           style="fill: #c00;" />


    </svg>
  </body>

</html>
